<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-11-03 18:36:55
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-11-04 09:01:35
 * @FilePath: \票务管理\app\ticketing-management\vue-project\src\views\home\TrainNumber\editTrainNumber\index.vue
 * @Description: 
 * qq1908552310
-->
<template>
    <div class="add-container">
        <div class="add-header">
            <div class="header-left">
                <div class="gun"></div><span style="color:#1BA9BA">编辑车次</span>
            </div>
            <div>
                <button class="cancel" @click="cancel">
                    取消
                </button>
                <button class="submit" @click="submit">
                    提交
                </button>
            </div>
        </div>
        <div class="add-main">
            <div class="main-header">
                <div class="titleMsg">
                    基本信息
                </div>
            </div>
            <div class="main-selectd">
                <div>
                    <span style="margin-right:10px">
                        车次类型
                    </span>
                    <a-space>
                        <a-select v-model:value="AddFrom.TrainType" style="width: 95px">
                            <a-select-option value="全部">全部</a-select-option>
                            <a-select-option value="高速动车">高铁</a-select-option>
                            <a-select-option value="普通列车">普通</a-select-option>
                            <a-select-option value="动车">动车</a-select-option>
                            <a-select-option value="普快">普快</a-select-option>
                            <a-select-option value="特快">特快</a-select-option>
                        </a-select>
                    </a-space>
                </div>
                <div>
                    <span style="margin-right:10px">
                        车次
                    </span>
                    <el-input v-model="AddFrom.TrainNumber" clearable style="width: 100px" placeholder="请输入车次" />
                </div>
                <div>
                    <span style="margin-right:10px">
                        车长
                    </span>
                    <el-input v-model="AddFrom.TrainManager" clearable style="width: 100px" placeholder="请输入姓名" />
                </div>
            </div>
            <div class="main-number">
                <div>
                    <span style="margin-right:10px">
                        席位总数
                    </span>
                    <span>{{ AddFrom.Seat }}</span>
                </div>
                <div>
                    <span style="margin-right:10px">
                        车厢总数
                    </span>
                    <span>{{ AddFrom.Carriage }}</span>
                </div>
                <div>
                    <span style="margin-right:10px">
                        限乘人数
                    </span>
                    <span>{{ AddFrom.RideLimitation }}</span>
                </div>
                <div>
                    <span style="margin-right:10px">
                        无座位数
                    </span>
                    <span>{{ AddFrom.WithoutSeat }}</span>
                </div>
            </div>
            <div>
                <el-table :data="seatData.list" stripe style="width: 100%">
                    <el-table-column align="center" prop="seatCategory" label="座位类别" />
                    <el-table-column align="center" label="车箱数" width="161">
                        <template #default="{ row }">
                            <el-input-number style="width:120px" v-model="row.carriageCount" :min="1" :max="100" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="每车排数" width="161">
                        <template #default="{ row }">
                            <el-input-number style="width:120px" v-model="row.rowPerCarriage" :min="1" :max="100" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="seatPerRow" label="每车席位" />
                    <el-table-column align="center" label="每车限乘人数" width="161">
                        <template #default="{ row }">
                            <el-input-number style="width:120px" v-model="row.maxPassengerPerCarriage" :min="1"
                                :max="100" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="standingSeatPerCarriage" label="每车无座数" />
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, reactive, watch } from 'vue'
import * as api from '@/api/index.ts'
import { useEditTrain } from '@/modules/edittrain'
import { message } from 'ant-design-vue';

const SelectValue: any = ref('全部')
const router = useRouter()
const EditTrain = useEditTrain()

const AddFrom: any = reactive({
    id: "",
    TrainType: '',
    TrainNumber: "",
    TrainManager: '',
    Seat: "",
    Carriage: "",
    RideLimitation: "",
    WithoutSeat: "",
    getTime: ""
})
const seatData = reactive({
    list: [
        {
            "seatCategory": "商务座",
            "carriageCount": 1,
            "rowPerCarriage": 1,
            "seatPerRow": 4,
            "maxPassengerPerCarriage": 1,
            "standingSeatPerCarriage": 0
        },
        {
            "seatCategory": "一等座",
            "carriageCount": 1,
            "rowPerCarriage": 1,
            "seatPerRow": 4,
            "maxPassengerPerCarriage": 1,
            "standingSeatPerCarriage": 0
        },
        {
            "seatCategory": "二等座",
            "carriageCount": 1,
            "rowPerCarriage": 1,
            "seatPerRow": 4,
            "maxPassengerPerCarriage": 1,
            "standingSeatPerCarriage": 0
        },
        {
            "seatCategory": "软卧",
            "carriageCount": 1,
            "rowPerCarriage": 1,
            "seatPerRow": 4,
            "maxPassengerPerCarriage": 1,
            "standingSeatPerCarriage": 0
        },
        {
            "seatCategory": "硬卧",
            "carriageCount": 1,
            "rowPerCarriage": 1,
            "seatPerRow": 4,
            "maxPassengerPerCarriage": 1,
            "standingSeatPerCarriage": 0
        },
        {
            "seatCategory": "硬座",
            "carriageCount": 1,
            "rowPerCarriage": 1,
            "seatPerRow": 4,
            "maxPassengerPerCarriage": 1,
            "standingSeatPerCarriage": 20
        }
    ]
})


// 计算席位总数
const calculateTotalSeats = () => {
    let totalSeats = 0;
    // 遍历座位数据数组，累加每个座位类别的每车席位数
    for (const seatCategory of seatData.list) {
        // console.log(seatCategory, "seatCategoryseatCategory")
        totalSeats += seatCategory.carriageCount * seatCategory.rowPerCarriage * seatCategory.seatPerRow
    }
    AddFrom.Seat = totalSeats
}

// 计算每车的席位
const seatPerRowSeats = () => {
    let totalSeats = 4;
    for (const seatCategory of seatData.list) {
        seatCategory.seatPerRow = totalSeats * seatCategory.rowPerCarriage
    }
}
// 车厢总数 / 限乘人数 / 无座人数
const totality = () => {
    let carriage = 0; //车厢总数
    let rideLimitation = 0;
    let withoutSeat = 0;
    for (const seatCategory of seatData.list) {
        carriage += seatCategory.carriageCount
        rideLimitation += seatCategory.maxPassengerPerCarriage
        withoutSeat += seatCategory.standingSeatPerCarriage
    }
    AddFrom.Carriage = carriage
    AddFrom.RideLimitation = rideLimitation
    AddFrom.WithoutSeat = withoutSeat
}


watch(() => seatData.list, () => {
    calculateTotalSeats()
    seatPerRowSeats()
    totality()
}, { deep: true, immediate: true })

watch(() => router, () => {
    AddFrom.id = EditTrain.list.id
    AddFrom.TrainType = EditTrain.list.train_type //车次类型
    AddFrom.TrainNumber = EditTrain.list.train_number //车次
    AddFrom.TrainManager = EditTrain.list.train_manager //车长
    AddFrom.Seat = EditTrain.list.total_seats //席位总数
    AddFrom.Carriage = EditTrain.list.carriage_number //车厢总数
    AddFrom.RideLimitation = EditTrain.list.passenger_limit //限乘人数
}, { deep: true, immediate: true })
const cancel = () => {
    router.push('/home/trainnumber')
    localStorage.setItem('type', 'data')
}
const submit = async () => {
    console.log(AddFrom)
    let data = await api.putTicket(`http://localhost:7001/v1/api/ticket/${AddFrom.id}`, AddFrom)
    console.log(data, "data")
    if (data.data.code == 200) {
        message.success('删除成功');
        router.push('/home/trainnumber')
        localStorage.setItem('type', 'data')
        localStorage.removeItem('editrain')
    }

}
</script>

<style scoped lang="scss">
.add-container {
    width: 100%;
    height: 100%;

    .add-header {
        width: 100%;
        height: 70px;
        display: flex;
        padding: 0 8px;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        .header-left {
            width: 80px;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .gun {
                width: 5px;
                height: 19px;
                background: #1BA9BA;
            }
        }



        button {
            width: 63px;
            height: 28px;

        }

        .cancel {
            border: solid 1px #1BA9BA;
            background: #fff;
            color: #1BA9BA;
        }

        .submit {
            background-color: #1BA9BA;
            color: #fff;
            border: none;
            margin-left: 10px;
        }
    }

    .add-main {
        margin-top: 10px;
        width: 100%;
        height: 500px;
        background: #fff;
        padding: 0 10px;

        .main-header {
            width: 100%;
            height: 60px;
            line-height: 60px;

            .titleMsg {
                font-size: 15px;
                font-weight: 600;
            }
        }

        .main-selectd {
            width: 70%;
            height: 55px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .main-number {
            width: 70%;
            height: 45px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            div {
                width: 120px;

                span:first-child {
                    color: rgb(145, 144, 144);
                }

            }

        }
    }
}
</style>